/**
 * @Name:  Context
 * @Author:
 * @Desc:
 * @Date: 2021-01-13 09:25:16
 */
import React, { Component, Fragment } from "react";
import { Title, HighLightJs } from "@/component";
import styles from "@/pages/ReactAdvancedGuides/styles.module.less";
const highTwo = `const ThemeContext = React.createContext({ theme: "light", name: "XXXXX" });

class Test extends Component {
  render() {
    return (
      <Fragment>
        <ThemeContext.Provider value={{ theme: "dark", name: "XXXXX" }}>
          <Test01 />
        </ThemeContext.Provider>
      </Fragment>
    );
  }
}

class Test01 extends Component {
  static contextType = ThemeContext;
  render() {
    return (
      <Fragment>
        <p>{this.context.name}</p>//XXXXX
        <Test02 />
      </Fragment>
    );
  }
}

class Test02 extends Component {
  static contextType = ThemeContext;
  render() {
    return (
      <Fragment>
        <p>{this.context.name}</p>//XXXXX
      </Fragment>
    );
  }
}`;
class Context extends Component {
  render() {
    return (
      <Fragment>
        <div className={styles.block}>
          <Title text={"Context-向下传参"} />
          <p>特点：向下传参，其子级均能使用最高父级传入参数-模块内全局可用</p>
          <p>多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据。</p>
          <HighLightJs type="JavaScript" data={highTwo} />
        </div>
        <Test />
      </Fragment>
    );
  }
}
const ThemeContext = React.createContext({ theme: "light", name: "XXXXX", background: "#666" });
class Test extends Component {
  tests = (val) => {
    console.log("val===test===", val);
  };
  render() {
    return (
      <Fragment>
        <ThemeContext.Provider value={{ theme: "dark", name: "XXXXX", tests: this.tests }}>
          <Test01 />
        </ThemeContext.Provider>
        <ThemeContext.Consumer>{({ background }) => <button style={{ backgroundColor: background }}>Toggle Theme</button>}</ThemeContext.Consumer>
      </Fragment>
    );
  }
}

class Test01 extends Component {
  static contextType = ThemeContext;
  test = () => {
    console.log("ahhhhhhhh", this.context);
  };
  render() {
    return (
      <Fragment>
        <p>{this.ass}</p>
        <p>{this.context.name}</p>
        {this.context.tests("这是test01===")}
        {this.test()}
        <Test02 />
      </Fragment>
    );
  }
}

class Test02 extends Component {
  static contextType = ThemeContext;
  render() {
    return (
      <Fragment>
        <p>{this.context.name}</p>
        {this.context.tests("这是test02===")}
      </Fragment>
    );
  }
}

class Test03 extends Component {
  // static contextType = ThemeContext;
  render() {
    // console.log('Test03===',this.context)
    return (
      <Fragment>
        <p>Test03</p>
      </Fragment>
    );
  }
}

export default Context;
